import { EnumInterviewState, InterviewResult } from "@/apis/endpoint/model";
import { getMyMyinterviews } from "@/apis/endpoint/my";
import GpContainer from "@/components/GpContainer";
import GpEmpty from "@/components/GpEmpty";
import { dateFormat } from "@/utils/date";
import { Image, View } from "@tarojs/components";
import clsx from "clsx";
import { useEffect } from "react";
import { useImmer } from "use-immer";

export default function Index() {
  const [list, setList] = useImmer<Array<InterviewResult>>([])
  useEffect(() => {
    getMyMyinterviews()
    .send()
    .then(setList)
  }, [])
  return (
    <GpContainer className="bg-[#F4F6FC] px-[16px] py-[32px]">
      {
        list.length
        ? list.map(item => {
          const isPending = item.state === EnumInterviewState.待面试
          return (
            <View key={item.id} className="box-border h-[176px] mb-[16px] px-[24px] flex flex-row items-center rounded-[24px] bg-white shadow-[0_0_32px_rgba(46,41,77,0.04)]">
              <Image src={item.companyLogo || __DEF_COMPANY_LOGO__} className="size-[112px] object-cover float-none mr-[20px]" />
              <View className="flex-1 w-0">
                <View className="flex flex-row justify-between items-center gap-[70px]">
                  <View className={clsx("truncate font-bold text-[32px] !leading-[32px]", isPending ? "text-primary" : "text-third")}>
                    {item.companyName}
                  </View>
                  <View className={clsx("flex-none text-[28px] !leading-[28px]", isPending ? "text-theme" : "text-third")}>
                    {item.stateDisplayString}
                  </View>
                </View>
                <View className="flex flex-row items-center mt-[20px]">
                  <View className={clsx("truncate text-[28px] !leading-[28px]", isPending ? "text-secondary" : "text-placeholder")}>
                    {item.jobName}
                  </View>
                  <View className={clsx("flex-none text-[28px] !leading-[28px] mr-[24px]", isPending ? "text-secondary" : "text-placeholder")}>
                    · {item.salaryDisplay}
                  </View>
                  <View className={clsx("flex-none text-[28px] !leading-[28px] ml-auto", isPending ? "text-theme" : "text-placeholder")}>
                    {dateFormat(item.interviewTime, "MM月DD日")}
                  </View>
                </View>
              </View>
            </View>
          )
        }) : <GpEmpty />
      }
    </GpContainer>
  )
}
